<template>
  <better-scroll :data="this.list" class="singer-scroll" ref="scroll">
    <div>
      <ul>
        <li class="list-group" v-for="(group,index) in list" :key="index" :ref="group.title">
          <h2 class="group-title">{{group.title}}</h2>
          <ul>
            <li class="list-group-item" v-for="item in group.items" :key="item.singer_id">
              <img class="item-img" v-lazy="item.singer_pic">
              <span class="item-name" v-html="item.singer_name"></span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <loading class="loading" v-show="!list.length"></loading>
  </better-scroll>
</template>

<script>
import Loading from '@/components/loading/loading'
import BetterScroll from '@/components/scroll/Scroll'
export default {
  name: 'SingerListiew',
  props: {
    list: Array,
    letter: ''
  },
  components: {
    BetterScroll,
    Loading
  },
  watch: {
    letter () {
      if (this.letter) {
        console.log(this.letter)
        let element = this.$refs[this.letter][0]
        this.$refs.scroll.scrollToElement(element)
      }
    }
  }
}

</script>
<style lang='stylus' scoped>
@import '~styles/variable';
.singer-scroll
  position fixed
  width 100%
  top 1.72rem
  bottom 0
  overflow hidden
  .loading
    margin-top 20%
  .group-title
    background $color-highlight-background = #333
    line-height .52rem
    font-size $font-size-small
    padding-left .4rem
    color $color-text-l
  .list-group-item
    padding .2rem .6rem
    .item-img
      width 1rem
      height 1rem
      border-radius 50%
    .item-name
      font-size $font-size-medium
      margin-left .2rem
      color $color-text-l
</style>
